<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="60%"
      append-to-body
      :before-close="close"
      class="custom-dialog"
    >
      <div class="header" slot="title">
        <div class="title">
          {{ title }}
        </div>
        <el-steps :active="currentStep" align-center>
          <el-step title="新房签约"> </el-step>
          <el-step title="当前住房办理退房"></el-step>
        </el-steps>
      </div>

      <div class="dialog-content">
        <div class="form-content" v-show="currentStep == 1">
          <el-form
            :model="form"
            :rules="rules"
            ref="form"
            label-width="120px"
            class="add-form"
            label-position="top"
          >
            <div class="section">
              <div class="label">
                <label>房屋信息</label>
              </div>
              <el-form-item label="房间" prop="room">
                <el-select v-model="form.room" multiple placeholder="请选择">
                  <el-option
                    v-for="item in roomList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="合同模板" prop="contractId">
                <el-select v-model="form.contractId" placeholder="请选择">
                  <el-option
                    v-for="item in contractList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="section">
              <div class="label">
                <label>租客信息</label>
              </div>
              <el-form-item label="身份" prop="shenfen">
                <el-radio-group v-model="form.shenfen">
                  <el-radio :label="0">个人</el-radio>
                  <el-radio :label="1">企业</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="form.shenfen == 1">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="企业名称" prop="chengzuren">
                      <el-input
                        placeholder="请输入"
                        v-model="form.chengzuren"
                        style="width: 80%"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="法人代表" prop="dianhua">
                      <el-input
                        v-input.num
                        placeholder="请输入"
                        v-model="form.dianhua"
                        style="width: 80%"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="统一社会信用代码" prop="chengzuren">
                      <el-input
                        placeholder="请输入"
                        v-model="form.chengzuren"
                        style="width: 80%"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item
                      label="证件信息（统一社会信用代码）"
                      prop="dianhua"
                    >
                      <image-upload
                        v-model="form.apartmentPicture"
                        :limit="1"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="委托人姓名" prop="chengzuren">
                      <el-input
                        placeholder="请输入"
                        v-model="form.chengzuren"
                        style="width: 80%"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="电话" prop="dianhua">
                      <el-input
                        v-input.num
                        placeholder="请输入"
                        v-model="form.dianhua"
                        style="width: 80%"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div v-if="form.shenfen == 0">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="承租人姓名" prop="chengzuren">
                      <el-input
                        placeholder="请输入"
                        v-model="form.chengzuren"
                        style="width: 80%"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="电话" prop="dianhua">
                      <el-input
                        v-input.num
                        placeholder="请输入"
                        v-model="form.dianhua"
                        style="width: 80%"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>

              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="性别" prop="xingbie">
                    <el-radio-group v-model="form.xingbie">
                      <el-radio :label="0">男</el-radio>
                      <el-radio :label="1">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证号" prop="shenfenzheng">
                    <el-input
                      placeholder="请输入"
                      v-model="form.shenfenzheng"
                      style="width: 80%"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="section">
              <div class="label">
                <label>租期信息</label>
              </div>
              <el-form-item label="合同类型" prop="contractType">
                <el-select v-model="form.contractType" placeholder="请选择">
                  <el-option
                    v-for="item in contractTypeList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="租期起止日期" prop="riqi">
                <el-col :span="8">
                  <el-form-item prop="noRentableStartTime">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="form.noRentableStartTime"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center"
                  >至</el-col
                >
                <el-col :span="8">
                  <el-form-item prop="noRentableEndTime">
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="form.noRentableEndTime"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="付款方式" prop="payType">
                <el-select
                  v-model="form.payType"
                  placeholder="请选择"
                  style="margin-right: 10px"
                >
                  <el-option
                    v-for="item in paymentList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-checkbox v-model="form.payType1"
                  >按面积计算租金</el-checkbox
                >
              </el-form-item>

              <el-row :gutter="10">
                <el-col :span="24">
                  <el-form-item label="押付方式" prop="yafu">
                    <el-select v-model="form.contractType" placeholder="请选择">
                      <el-option
                        v-for="item in payTypeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="租金" prop="zujin">
                    <el-input
                      placeholder="请输入"
                      v-model="form.zujin"
                      style="width: 80%"
                    >
                      <span slot="append">元/月</span>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="押金" prop="yajin">
                    <el-input
                      v-input.num
                      placeholder="请输入"
                      v-model="form.yajin"
                      style="width: 80%"
                    >
                      <span slot="append">元</span>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10" v-if="form.payType1">
                <el-col :span="12">
                  <el-form-item label="面积单价" prop="zujin">
                    <el-input
                      placeholder="请输入"
                      v-model="form.zujin"
                      style="width: 80%"
                    >
                      <span slot="append">元/m²</span>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="面积" prop="yajin">
                    <el-input
                      v-input.num
                      placeholder="请输入"
                      v-model="form.yajin"
                      style="width: 80%"
                    >
                      <span slot="append">m²</span>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="总租金" prop="zujin">
                    <el-input
                      placeholder="请输入"
                      v-model="form.zujin"
                      style="width: 80%"
                    >
                      <span slot="append">元/月</span>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="押金" prop="yajin">
                    <el-input
                      v-input.num
                      placeholder="请输入"
                      v-model="form.yajin"
                      style="width: 80%"
                    >
                      <span slot="append">元</span>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <div class="custom-formItem-lable" slot="label">
                  <span>其他费用</span>
                  <i
                    class="handle-icon el-icon-circle-plus"
                    @click="dialogChargeItemVisible = true"
                  ></i>
                </div>
                <el-row
                  :gutter="10"
                  v-for="(item, index) in chargeItemSelected"
                  :key="index"
                  style="margin-bottom: 10px"
                >
                  <el-col :span="2">
                    <span>{{ item.chargeItemName }}</span>
                  </el-col>
                  <el-col :span="8">
                    <el-select v-model="item.pay" multiple placeholder="请选择">
                      <el-option
                        v-for="item in changeItemPayList"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="10">
                    <el-input
                      placeholder="请输入"
                      v-model="item.chargeItemPrice"
                      style="width: 80%"
                    >
                      <span slot="append">元</span>
                    </el-input>
                  </el-col>
                  <el-col :span="2">
                    <i
                      class="handle-icon el-icon-remove"
                      @click="removeChargeItem(index)"
                    ></i>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="账单日期" prop="zhangdanriqi">
                <span>每月</span>
                <el-input
                  placeholder="请输入"
                  v-model="form.zhangdanriqi"
                  style="width: 220px; margin: 0 5px"
                />
                <span>号生成账单</span>
              </el-form-item>
              <el-form-item label="收款日期" prop="zhangdanriqi">
                <el-row :gutter="10" style="margin-bottom: 22px">
                  <el-col :span="24">
                    <el-radio v-model="form.select" label="0">提前</el-radio>
                    <el-input
                      placeholder="请输入"
                      v-model="form.day1"
                      style="width: 220px; margin: 0 5px"
                    />
                    <span>天收租</span>
                  </el-col>
                </el-row>

                <el-row :gutter="10">
                  <el-col :span="24">
                    <el-radio v-model="form.select" label="1"
                      >固定当月</el-radio
                    >
                    <el-input
                      placeholder="请输入"
                      v-model="form.day2"
                      style="width: 220px; margin: 0 5px"
                    />
                    <span>号收租</span>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="滞纳金" prop="zhinajin">
                <span>每天</span>
                <el-input
                  placeholder="请输入"
                  v-model="form.zhangdanriqi"
                  style="width: 220px; margin: 0 5px"
                />
                <span>元（每逾期一天，按X元加收滞纳金）</span>
              </el-form-item>
            </div>
            <div class="section">
              <div class="label">
                <label>设备信息</label>
              </div>
              <el-form-item label="" prop="">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="水表读数" prop="chengzuren">
                      <el-input
                        placeholder="请输入"
                        v-model="form.chengzuren"
                        style="width: 80%"
                      >
                        <span slot="append">吨</span>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="水费单价" prop="dianhua">
                      <el-input
                        v-input.num
                        placeholder="请输入"
                        v-model="form.dianhua"
                        style="width: 80%"
                      >
                        <span slot="append">元/吨</span>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="电表读数" prop="chengzuren">
                      <el-input
                        placeholder="请输入"
                        v-model="form.chengzuren"
                        style="width: 80%"
                      >
                        <span slot="append">度</span>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="电费单价" prop="dianhua">
                      <el-input
                        v-input.num
                        placeholder="请输入"
                        v-model="form.dianhua"
                        style="width: 80%"
                      >
                        <span slot="append">元/度</span>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="form-content" v-show="currentStep == 2">
          <el-descriptions title="合同信息">
            <el-descriptions-item label="房间地址"
              >1201房/红枫小区A栋1单元</el-descriptions-item
            >
            <el-descriptions-item label="合同周期"
              >2023-09-12~2024-09-11</el-descriptions-item
            >
            <el-descriptions-item label="承租人"
              >赵先生-13233445566</el-descriptions-item
            >
            <el-descriptions-item label="租金">1200元/月</el-descriptions-item>
            <el-descriptions-item label="押金">1600元/月</el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="退租费用结算"></el-descriptions>
          <el-form :model="form" :inline="true">
            <el-form-item label="实际离房日期（财务终止日期）">
              <el-date-picker
                v-model="form.time"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="退租类型">
              <el-radio-group v-model="form.resource">
                <el-radio label="正常退租"></el-radio>
                <el-radio label="违约退租"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否加收房间清洁费">
              <el-radio-group v-model="form.isCleaningFee">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="清洁费" v-if="form.isCleaningFee == 1">
              <el-input v-model="form.cleaningFee"></el-input>
            </el-form-item>
            <el-descriptions title="退租租客收款人信息"></el-descriptions>
            <el-form-item label="收款人姓名">
              <el-input v-model="form.cleaningFee"></el-input>
            </el-form-item>
            <el-form-item label="收款人电话">
              <el-input v-model="form.cleaningFee"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="form.cleaningFee"></el-input>
            </el-form-item>
            <el-form-item label="收款方式">
              <el-input v-model="form.cleaningFee"></el-input>
            </el-form-item>
            <el-form-item label="收款账号">
              <el-input v-model="form.cleaningFee"></el-input>
            </el-form-item>
            <el-form-item label="退租备注">
              <el-input v-model="form.cleaningFee"></el-input>
            </el-form-item>
          </el-form>
          <el-descriptions title="费用明细"></el-descriptions>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="欠费" name="first"></el-tab-pane>
            <el-tab-pane label="退还" name="second"></el-tab-pane>
            <el-tab-pane label="扣减" name="third"></el-tab-pane>
          </el-tabs>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="费用类型"> </el-table-column>
            <el-table-column prop="name" label="金额"> </el-table-column>
            <el-table-column prop="address" label="费用周期"> </el-table-column>
            <el-table-column prop="" label="操作">
              <i class="el-icon-delete"></i>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="prev" v-if="currentStep > 1"
          >上一步</el-button
        >
        <el-button @click="cancel">关 闭</el-button>
        <el-button type="primary" @click="next" v-if="currentStep < 2"
          >下一步</el-button
        >
        <el-button type="primary" @click="submitForm" v-else>保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addContractTemplate,
  updateContractTemplate,
} from "@/api/contract/template";
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      default: "换房",
    },
    success: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      visible: false,
      currentStep: 1,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        templateName: [
          { required: true, message: "模板名称不能为空", trigger: "blur" },
        ],
        apartmentType: [
          { required: true, message: "租期类型不能为空", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    value(newVal, oldVal) {
      this.visible = newVal; // 监测value的变化，并赋值。
      if (newVal) {
        this.init();
      }
    },
    visible(val) {
      this.$emit("input", val); // 此处监测showMask目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    },
  },
  mounted() {
    this.visible = this.value;
  },
  methods: {
    init() {
      this.currentStep = 1;
      this.reset();
    },
    //重置表单
    reset() {
      this.form = {
        templateName: "", //合同模板名称
        content: "", //合同模板内容
        apartmentType: undefined, //公寓类型(出租周期)：1短租公寓;2长租公寓
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.templateId != undefined) {
            updateContractTemplate(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("success");
            });
          } else {
            console.log("add");
            addContractTemplate(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.$emit("success");
            });
          }
          this.close();
        }
      });
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.visible = false;
    },
    close() {
      this.reset();
      this.visible = false;
    },
    next() {
      if (this.currentStep >= 2) return;
      this.currentStep++;
    },
    prev() {
      if (this.currentStep <= 1) return;
      this.currentStep--;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  max-height: 70vh !important;
  overflow-y: auto;
}
.custom-dialog {
  .header {
    .title {
      margin-bottom: 10px;
    }
    border-bottom: 1px solid #eee;
  }
}

.dialog-content {
}
.add-form {
  margin-top: 30px;
  .section {
    .label {
      display: flex;
      margin-bottom: 20px;
      font-size: 16px;
      align-items: center;
      color: #303133;
      label {
        display: block;
        width: 80px;
        &.dot::before {
          content: "*";
          color: #ff4949;
          margin-right: 4px;
        }
      }
      .icon {
        color: #02a7f0;
        font-size: 30px;
        margin-left: 30px;
        cursor: pointer;
      }
    }
    .content {
      background: #f5f7fe;
      padding: 15px 10px;
      span {
        line-height: 30px;
      }
    }
    .tips {
      color: #aaaaaa;
    }
    .custom-formItem-lable {
      display: flex;
      align-items: center;
      .handle-icon {
        color: #02a7f0;
        font-size: 30px;
        margin-left: 30px;
        cursor: pointer;
      }
    }
    .handle-icon {
      color: #02a7f0;
      font-size: 30px;
      cursor: pointer;
    }
  }
}
</style>